react native中使用echarts |
您所在的位置：网站首页 › react native 安卓11 › react native中使用echarts |
react native中使用echarts
|
开发平台：mac pro node版本：v8.11.2 npm版本：6.4.1 react-native版本：0.57.8 native-echarts版本：^0.5.0 目标平台：android端收银机，android7.0+
最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题
使用场景：每日收益与每月收益的折线图统计
在pc/h5端的开发工作中，图标类的开发使用echarts/f2等三方工具都是比较常见的了，在react native中，没有了DOM的概念，因此在react native中使用了一些三方的图标库 native-echarts，github地址。
需要更换echarts版本的方法 native-echarts内部使用了react native中的webview进行图表的展示，本质上只是传入数据，通过echarts渲染出静态的HTML文档，然后通过webview展示出来而已。 netive-echarts内部使用的echarts版本为v3.2.3"版本，如果需要更高级的echarts版本，只需要更换src/components/Echarts/echarts.min.js文件以及tpl.html文件里的内容即可。
使用时遇到的问题: 在debug模式下，真机以及测试机器上图标正常显示，打包成android的apk文件后图表都不显示 解决方式： 1：找到native-echarts/src/components/Echarts/tpl.html文件，复制到android/app/src/main/assets这个目录下面，如果文件夹不存在就新建一个即可。 2：找到文件native-echarts/src/components/Echarts/index.js，修改为一下内容 import React, { Component } from 'react'; import { WebView, View, StyleSheet, Platform } from 'react-native'; import renderChart from './renderChart'; import echarts from './echarts.min'; export default class App extends Component { constructor(props) { super(props); } // 预防过渡渲染 shouldComponentUpdate(nextProps, nextState) { const thisProps = this.props || {} nextProps = nextProps || {} if (Object.keys(thisProps).length !== Object.keys(nextProps).length) { return true } for (const key in nextProps) { if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) { // console.log('props', key, thisProps[key], nextProps[key]) return true } } return false } componentWillReceiveProps(nextProps) { if (nextProps.option !== this.props.option) { // 解决数据改变时页面闪烁的问题 this.refs.chart.injectJavaScript(renderChart(nextProps)) } } render() { return ( this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null} /> ); } }
可能存在的问题？？？？
同时，在后续的react native版本中，webview即将从react native内部移除出去，改为三方包安装使用。参考： https://reactnative.cn/docs/webview/#mixedcontentmode https://github.com/react-native-community/discussions-and-proposals/issues/6 因此，在后续新版本中使用native-echarts，可能会使用不了，因此建议fork一个稳定的版本到自己的github上，或者在后续自己采用react-native-webview + echarts的方式自由的组合版本，使用起来更加自由。
参考文档： https://github.com/somonus/react-native-echarts/issues/47 https://github.com/somonus/react-native-echarts/issues/32 https://github.com/somonus/react-native-echarts/issues/122
文章来源：出处（可自定义），作者：admin。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：sean.li#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。 
后台-系统设置-扩展变量-手机广告位-内容正文底部
|
【本文地址】
今日新闻 |
推荐新闻 |